import React from "react";
import kexin from "../../../assets/image/home_page/footer/kexin.svg";
import Logo from "../../../assets/image/home_page/logo.svg";
import "../../../assets/sass/home_page/free_templates/featured_picks/footer/footer.css";
import { MobileOutlined } from "@ant-design/icons";

const Footer = () => {
  const list = [
    {
      title: "产品矩阵",
      data: ["H5", "海报", "长页", "表单", "互动", "视频", "电子画册"],
    },
    {
      title: "创意工具",
      data: [
        "红包",
        "打赏",
        "短信通知",
        "二维码美化",
        "只能抠图",
        "文字云",
        "拼图",
        "智能海报",
        "一键快闪",
      ],
    },
    {
      title: "灵感交流",
      data: [
        "用户社区",
        "创意课堂",
        "客户案例",
        "精选推荐",
        "热门作品",
        "营销日历",
      ],
    },
    {
      title: "服务帮助",
      data: [
        "审核规则",
        "作品审核",
        "网站地图",
        "热门模板",
        "客服中心",
        "帮助中心",
        "隐私协议",
      ],
    },
    {
      title: "合作伙伴",
      data: [
        "设计师招募",
        "合伙人招募",
        "正版素材商",
        "内容中台",
        "内容安全审核",
      ],
    },
    {
      title: "公司信息",
      data: ["关于我们", "人才招聘", "公司动态", "荣誉奖项", "商务合作"],
    },
    {
      title: "社交媒体",
      data: ["微信公众号", "官方微博", "视频号"],
    },
  ];

  return (
    <div className="content_footer">
      <div className="footer_inner">
        <div className="inner_left">
          <div className="logo">
            <img src={Logo} />
          </div>
          <div className="text">全球1000强，中国100强网站</div>
          <div className="list">
            <div>
              <div className="h1">700亿+</div>
              <div className="small_text">作品传播次数</div>
            </div>
            <div>
              <div className="h1">3亿+</div>
              <div className="small_text">累计作品数</div>
            </div>
            <div>
              <div className="h1">6500万+</div>
              <div className="small_text">累计注册用户</div>
            </div>
            <div>
              <div className="h1">100万+</div>
              <div className="small_text">正版模板素材</div>
            </div>
            <div>
              <div className="h1">3000+</div>
              <div className="small_text">安全运行天数</div>
            </div>
          </div>
        </div>
        <div className="inner_center">
          {list &&
            list.map((item, index: number) => {
              return (
                <div className="list_vertical" key={index}>
                  <div className="list_vertical_title">{item.title}</div>
                  {item.data.map((items, indexs: number) => {
                    return (
                      <div key={indexs} className="list_children">
                        {items}
                      </div>
                    );
                  })}
                </div>
              );
            })}
        </div>
        <div className="inner_right">
          <div className="tel_app">
            <MobileOutlined className="tel_icon" />
            手机APP
          </div>
          <div className="text">扫码注册 3分钟做出好设计</div>
          <div className="code">
            <img src="/src/assets/image/home_page/footer/footer_code.png" />
          </div>
        </div>
      </div>
      <div className="footer_bottom">
        <div className="bottom_text">
          <p>©2024 eqxiu.com. All rights reserved 北京中网易企秀科技有限公司</p>
          <p>
            电信与信息服务业务经营许可证：京ICP证160037号|京ICP备15056244号|京公网安备11010802018300
          </p>
          <div style={{ width: "100%", height: "10px" }}></div>
        </div>
        <div className="bottom_logo">
          <img src="/src/assets/image/home_page/footer/brand_bottom_large.png" />
          <img src={kexin} />
        </div>
      </div>
    </div>
  );
};

export default Footer;
